<template lang="pug">
.cp-assgin-view
  el-dialog(:title="title", :visible="visible", @close="close")
    el-row(:gutter="20")
      el-col(:span="24")
        strong 【 指派类型 】
        span {{ detail.assignType | compare-list(typeSelect) }}
    el-row(:gutter="20")
      el-col(:span="24")
        strong 【 指派原因 】
        span {{ detail.assignReason | compare-arr(reasonSelect) }}
    el-row(:gutter="20")
      el-col(:span="24")
        strong 【 课程组合 】
        span {{ detail.assignCourse | compare-arr(courseSelect) }}
    el-row(:gutter="20")
      el-col(:span="24")
        strong 【 必选员工 】
        span {{ detail.requireStaff | compare-arr(roleSelect) }}
    el-row(:gutter="20")
      el-col(:span="24")
        strong 【 可选员工 】
        span {{ detail.optionStaff | compare-arr(roleSelect) }}
    el-row(:gutter="20", v-show="detail.assignType == '0'")
      el-col(:span="24")
        strong 【 到期时间 】
        span {{ detail.expireDate | date-locale }}
    el-row(:gutter="20", v-show="detail.assignType == '1'")
      el-col(:span="24")
        strong 【 指派周期 】
        span {{ detail.assignCycle }}
        span {{ detail.cycleType | compare-list(periodSelect) }}
    el-row(:gutter="20", v-show="detail.assignType == '1'")
      el-col(:span="24")
        strong 【 提示日期 】
        span {{ detail.assignTip }}
        span {{ detail.tipType | compare-list(periodSelect) }}
</template>

<script>
import { mapGetters } from 'vuex';

export default {
  name: 'assignview',
  props: {
    title: {
      type: String,
      default: '查看指派详情'
    },
    visible: Boolean,
    detail: Object
  },
  data() {
    return {
      typeSelect: [
        { name: '单次', value: '0' },
        { name: '重复', value: '1' }
      ],
      reasonSelect: [
        { name: '新员工', value: '0' },
        { name: '法律法规更新', value: '1' },
        { name: '行业标准学习', value: '2' }
      ],
      courseSelect: [
        { name: '新员工培训', value: '0' },
        { name: '销售培训', value: '1' },
        { name: '市场营销培训', value: '2' }
      ],
      periodSelect: [
        { name: '天', value: '0' },
        { name: '周', value: '1' },
        { name: '月', value: '2' },
        { name: '年', value: '3' }
      ]
    };
  },
  methods: {
    close () {
      this.$emit('close');
    }
  },
  computed: {
    ...mapGetters(['roleSelect'])
  },
  mounted () {}
};
</script>

<style lang="sass">
.cp-assgin-view
  .el-row
    margin-bottom: 12px
    &:nth-child(odd)
      background: #f5f5f5
    &:nth-child(even)
      background: beige
  strong
    display: inline-block
    font-weight: 400
    margin-right: 8px
</style>
